<template>
 
  <div class="layui-inline">
    <label class="layui-form-label">{{title}}</label>
    <div class="layui-input-inline">
      <select name="city" lay-verify="required">
        <option v-for="option in options" :value="option.sysCode">{{option.sysValue}}></option>
        
      </select>
    </div>
  </div>

</template>

<script>
export default {
    props:{
        title:{
            default:'选择框'
        },
        name:{
          default:"name"
        },
        value:{
            default:"text"
        },
        catalogueCode:{
             default:null
        },
        selected:{
            default:null
        },
        url:{
             default:null
        }
    },
    created(){
        this.getSysCode();
    },
   mounted(){
    
   },
   methods:{
         getSysCode:function(){
          var _catalogueCode = this.catalogueCode;
          var codeUrl =null;
          if(this.url==null){
            codeUrl =  this.$store.state.RootURL + "/sys/code";
          }else{
            codeUrl =  this.$store.state.RootURL + this.url;
          }
          var that = this;
          $.ajax({
            url: codeUrl,
            type:"get",
            async: true,
            dataType:'json',
            data: {"catalogueCode":_catalogueCode},
            success: function(data){
               that.options=data.data;
               //延迟执行更新，解决vue渲染dom和layui更新表单之间的时间差
               setTimeout(function(){
                if(that.selected!=null){
                    $('select[name='+that.name+']').val(that.selected);
                }
                 layui.form.render('select');
               },50);
              
            }
        });
      }
   }
}
</script>

<style lang="scss">

</style>
